<template>
<div class="contains">
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>安全管理</a-breadcrumb-item>
    <a-breadcrumb-item>管理员管理</a-breadcrumb-item>
  </a-breadcrumb>

  <!-- 查询条件 -->
  <a-form style="margin-bottom: 5px" layout="inline" :model="query">
    <a-form-item>
      <a-input v-model:value="query.m_id" style="width: 160px">
        <template #prefix>账号：</template>
      </a-input>
    </a-form-item>

    <a-form-item>
      <a-input v-model:value="query.m_name" style="width: 160px">
        <template #prefix>名字：</template>
      </a-input>
    </a-form-item>

    <a-form-item>
      <a-select v-model:value="query.m_status" style="width: 160px">
        <a-select-option value="">全部</a-select-option>
        <a-select-option value="super">超级管理员</a-select-option>
        <a-select-option value="admin">平台管理员</a-select-option>
        <a-select-option value="c_admin">电影管理员</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item>
      <a-button @click="getPage(1)" type="primary">
        <template #icon><SearchOutlined /></template>
        查询
      </a-button>
    </a-form-item>
  </a-form>

 

  <a-space style="margin-bottom: 5px">
    <a-button type="primary" @click="onClickAdd">新增</a-button>
    <a-button type="danger" @click="execDel">批量删除</a-button>
  </a-space>

  <a-table
    :dataSource="page.list"
    :row-key="(record) => record.m_id"
    :columns="columns"
    :pagination="pagination"
    @change="handleTableChange"
    :row-selection="rowSelection"
  >
    <template #m_status="{ text }">
      {{ text === "admin" ? "平台管理员" : text === "c_admin" ? "影院管理员" : text === "super" ? "超级管理员" :text === "cust" ? "普通用户" : "无" }}
    </template>
    <template #m_sex="{ text }">
      {{ text === "1" ? "男" : text === "0" ? "女" : "无" }}
    </template>
    <template #action="{ record }">
      <span>
        <a-button type="link" @click="onClickUpd(record)">修改</a-button>
        <a-divider type="vertical" />
        <a-button type="link" @click="execDelSingle(record)">删除</a-button>
        <a-divider type="vertical" />
      </span>
    </template>
  </a-table>

  <ad-add ref="AdAddRef" @ok="getPage(page.last + 1)"></ad-add>

  <admin-upd ref="AdminUpdRef" @ok="getPage(page.current)"></admin-upd>
</div>
</template>
<script setup>
//引入ref函数，用于构造单向绑定数据
import { ref, reactive, computed, nextTick, createVNode} from "vue";

//引入useRouter函数，用于获取路由器对象
import { useRouter } from "vue-router";

//引入函数，用于向服务端发送get请求
import { get, del, post, getBlob,put, tip, removeLocalToken } from "@/common";

//引入搜索图标
import { SearchOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";

import { Modal } from 'ant-design-vue';


import AdAdd from "./AdAdd.vue";
import AdminUpd from "./AdminUpd.vue";
//获取路由器对象
const router = useRouter();

const AdAddRef = ref();
const onClickAdd = ()=>{
  AdAddRef.value.open();
}
const AdminUpdRef = ref();
const onClickUpd = (record)=>{
  AdminUpdRef.value.open(record);
}

const columns = [
  {
    title: "账号id",
    dataIndex: "m_id",
    key: "id",
  },
  {
    title: "名字",
    dataIndex: "m_name",
    key: "name",
  },
  {
    title: "性别",
    dataIndex: "m_sex",
    key: "sex",
    slots: {
      customRender: "m_sex",
    },
  },
  {
    title: "生日",
    dataIndex: "m_birth",
    key: "birth",
  },
  {
    title: "角色",
    dataIndex: "m_status",
    key: "status",
    slots: {
      customRender: "m_status",
    },
  },

  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];

//分页处理-start
const query = reactive({
  m_id: "",
  m_name: "",
  m_sex:"",
  m_birth:"",
  m_status: "admin",
  pageNum: 1,
  pageSize: 5,
}); //定义查询参数

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pages: 5, //总页数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,共" +
      pagination.pages +
      "页,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/security/admin", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    //pagination.current = page.value.current;
    //pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
    pagination.pages = Math.ceil(page.value.total / pagination.pageSize);
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;

  pagination.pages = Math.ceil(pagi.total / pagination.pageSize);

  getPage(pagination.current);
};

//分页处理-end

// 删除
const selRows = ref([]);
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(selectedRowKeys);
    selRows.value = selectedRows;
  },

};

const execDel = () => {
  if(!selRows.value.length){
    tip.warn('请选择需要删除的数据！');
    return;
  }
   Modal.confirm({
        title: '您确实要删除选中的数据吗？',
        icon: createVNode(ExclamationCircleOutlined),        
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',

        onOk() {
          const delUser=[];
          selRows.value.forEach(item => {
            delUser.push(item);
          });
          
          console.log(delUser)

          del('/security/admin/del',delUser).then(res=>{
            getPage(page.value.current);
            tip.success('删除成功！');
          });
        },

        onCancel() {
          tip.info('您已取消删除操作！');
        },
      });
};

const adminMap =(m_status)=>{
   if (m_status=='cust')  return "普通用户"
   else if (m_status=='admin') return "平台管理员"
   else return "影院管理员" 
};

const execDelSingle = (record)=>{
  Modal.confirm({
        title: '您确定要删除作为'+adminMap(record.m_status)+'角色的'+record.m_name+'用户数据吗？',
        icon: createVNode(ExclamationCircleOutlined),        
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',

        onOk() {
          
          del('/security/admin/'+record.m_id,record.m_status).then(res=>{
            getPage(page.value.current);
            tip.success('删除成功！');
          });
        },

        onCancel() {
          tip.info('您已取消删除操作！');
        },
      });
};

</script>
<style scoped>
.contains{
  padding: 10px;
}
</style>